<template>
	<view class="foster-detail-header" :style="{height: (parseInt(height) + 72) + 'rpx',backgroundColor: appColor + '0D'}">
		<!-- 照片 -->
		<u-swiper @click="swiperClick" keyName="url" :radius="0" v-if="playType === 'img'" :height="height" :list="detail.image" indicator indicatorMode="dot" circular></u-swiper>
		<!-- 视频 -->
		<view v-else-if="playType === 'video' || playType === 'pr'">
			<JoyVideo :playInfo="videoSrc" :height="height"/>
		</view>
		<!-- 直播 -->
		<view v-else-if="playType === 'live'">
			<JoyLive :playInfo="liveSrc" :height="height"/>
		</view>
		
		<view class="img-type">
			<scroll-view :scroll-x="true" style="width: calc(100vw - 64rpx);white-space: nowrap;">
				<view @click="changeType(typeTag, index)" :style="{backgroundColor: activeIndex === index ? appColor : 'rgba(0,0,0,.4)'}" class="img-type-item" v-for="(typeTag, index) in typeList" :key="index">{{typeTag.title}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import JoyVideo from '@/components/joyVideo' ;
	import JoyLive from '@/components/joyLive' ;
	export default {
		name: 'TopBanner',
		components: {
			JoyVideo,
			JoyLive
		},
		props: {
			detail: {
				type: Object,
				default: function() {
					return {}
				}
			},
			height: {
				type: String,
				default: '430rpx'
			}
		},
		data() {
			return {
				playType: 'img',
				videoSrc: {},
				liveSrc: {},
				activeIndex: 0,
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			typeList() {
				let res = []
				const {image, video, cameraList, cookVideo} = this.detail;
				// 0 照片 1 视频 2 监控
				if(image) {
					res.push({title: '照片',playType: 'img'})
				}
				if(video) {
					res.push({title: '视频',playType: 'video'})
				}
				if(cookVideo) {
					res.push({title: '烹饪',playType: 'pr'})
				};
				if(cameraList && cameraList.length > 0) {
					cameraList.forEach(item => {
						res.push({title: item.name, id: item.id, url: item.liveUrl, playType: 'live'})
					})
				}
				return res;
			}
		},
		methods: {
			// 轮播图点击
			swiperClick(val) {
				this.previewImg(val, this.detail.image)
			},
			// 预览图片
			previewImg(current, urls) {
				urls = urls.map(item => item.url);
				uni.previewImage({
					current,
					urls,
				});
			},
			changeType({playType, url: liveUrl}, index) {
				this.playType = playType
				if(playType === 'live') {
					this.liveSrc = {url: liveUrl};
				} else if(playType === 'pr') {
					this.videoSrc =  this.detail.cookVideo[0];
				} else if (playType === 'video') {
					this.videoSrc = this.detail.video[0];
				}
				this.activeIndex = index;
			},
		}
	}
</script>


<style lang="scss" scoped>
	.foster-detail-header {
		position: relative;
		.img-type {
			position: absolute;
			width: 100%;
			bottom: 16rpx;
			left: 0;
			padding: 0 32rpx;
			display: flex;
			flex-wrap: wrap;
			.img-type-item {
				color: #fff;
				line-height: 24rpx;
				font-size: 24rpx;
				text-align: center;
				border-radius: 18rpx;
				padding: 8rpx 12rpx;
				margin-right: 16rpx;
				display: inline-block;
			}
			
		}
	}
</style>